Skip to content
This repository was archived by the owner on Jul 9, 2025. It is now read-only.

Conversation

@OEvgeny
Copy link
Collaborator

@OEvgeny OEvgeny commented Mar 1, 2022

Description

The PR aims to address the following issues found on pages with lists containing nested forms, including: "Bot Responses", "Knowledge (QnA)" and "Knowledge Base" pages.

Here is the list of issues addressed:

  • Unable to navigate to fields nested in DetailsList cells using keyboard
  • Some buttons are hidden while navigating via keyboard ("Clear field" button, "Add new" item button)
  • Save via keyboard Enter key doesn't work under several circumstances
  • Shift+Enter should persist caret position and the field in focus while adding a new line
  • Visual focus indication for focused fields works unstable
  • No error announcement
  • No way to blur selected fields when the focus is on the DetailsList cell field

Highlights on changes made:

  • Implement a CellFocusZone component to handle focus in DetailsLists' cells having form elements
  • Move all related logic to the component, so it can: focus form elements, handle Escape and Enter key and handle focus loss cases
  • Update EditField to play well with the new component
  • Add a callback to be called on EditField when a new line gets added
  • Handle Shift+Enter properly: from now it adds a new row to input and resets focus back to the input after it got switched to the textarea element
  • Update CSS rules to handle focus for tables-view and EditableField components
  • Refactor styles: move shared styles to the CellFocusZone
  • Refactor table-views: introduce CellFocusZone and improve keyboard handling
  • Knowledge Base: change the way alternative questions added (see the last gif: from now Shift+Enter equals clicking "Add new" button)
  • Fix EditField styles to handle field height correctly
  • Add announcements for EdtiField errors

Task Item

Screenshots

br-keyboard webm
ui-keyboard webm
kb-keyboard webm

#minor

The PR aims to address the following issues found on pages with lists containing nested forms, including: "Bot Responses", "Knowledge (QnA)" and "Knowledge Base" pages.

Here is the list of issues addressed:
- Unable to navigate to fields nested in DetailsList cells using keyboard
- Some buttons are hidden while navigating via keyboard ("Clear field" button, "Add new" item button)
- Save via keyboard Enter key doesn't work under several circumstances
- Shift+Enter should persist caret position and the field in focus while adding a new line
- Visual focus indication for focused fields works unstable
- No error announcement
- No way to blur selected fields when the focus is on the DetailsList cell field

Highlights on changes made:
- Implement a CellFocusZone component to handle focus in DetailsLists' cells having form elements
- Move all related logic to the component, so it can: focus form elements, handle Escape and Enter key and handle focus loss cases
- Update EditField to play well with the new component
- Add a callback to be called on EditField when a new line gets added
- Handle Shift+Enter properly: from now it adds a new row to input and resets focus back to the input after it got switched to the textarea element
- Update CSS rules to handle focus for tables-view and EditableField components
- Refactor styles: move shared styles to the CellFocusZone
- Refactor table-views: introduce CellFocusZone and improve keyboard handling
- Knowledge Base: change the way alternative questions added
- Fix EditField styles to handle field height correctly
- Add announcements for EdtiField errors
@tonyanziano
Copy link
Contributor

tonyanziano commented Mar 1, 2022

Looks like the server package's typecheck is failing:

Error: [typecheck:client] src/pages/knowledge-base/table-view.tsx(546,47): error TS2345: Argument of type 'number | undefined' is not assignable to parameter of type 'SetStateAction<number>'.
[typecheck:client]   Type 'undefined' is not assignable to type 'SetStateAction<number>'.

You can verify your fix by running npm run typecheck:server in the root

@OEvgeny
Copy link
Collaborator Author

OEvgeny commented Mar 1, 2022

@tonyanziano strange. It passes locally:
image

But npm run typechec:client doesn't. Let me fix this

@coveralls
Copy link

coveralls commented Mar 1, 2022

Coverage Status

Coverage decreased (-0.1%) to 55.866% when pulling 6e34993 on OEvgeny:a11y/table-inputs into e780326 on microsoft:main.

@tonyanziano tonyanziano merged commit 6eb3075 into microsoft:main Mar 3, 2022
@OEvgeny OEvgeny deleted the a11y/table-inputs branch March 4, 2022 18:46
@cwhitten cwhitten mentioned this pull request Aug 15, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants